<template>
    <div id='' class='i_header' :style="{'--bgColor':bgColor}">
        <div class="logo">
            <img :src="logoImg" alt="" srcset="" @click="backHome">
        </div>
        <div class="btn_content">
            <Button type="primary" shape="circle" @click="configuration">设备配置</Button>
            <Button type="primary" shape="circle" @click="changePassword">修改密码</Button>
            <Button type="primary" shape="circle" @click="layout">退出登录</Button>
        </div>
        <ConfigurationVue ref="configurationVueRef" />
    </div>
</template>
<script>
import ConfigurationVue from './configuration.vue'
export default {
    name: '',
    props: ['bgColor', 'logoImg'],
    data() {
        return {
        };
    },
    components:{ConfigurationVue},
    mounted() { },
    methods: {
        layout() {
            this.$emit('layout', {})
        },
        backHome() {
            this.$emit('backHome')
        },
        changePassword() {
            this.$emit('changePassword')
        },
        configuration(){
            this.$refs.configurationVueRef.init()
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.i_header {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 1920px;
    height: 80px;
    // background: rgba(0, 0, 0, 0.03);
    background: var(--bgColor);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .logo {
        width: 50%;
        display: flex;
        justify-content: center;
        cursor: pointer;
    }
    .btn_content {
        width: 50%;
        display: flex;
        justify-content: center;
        button {
            margin-left: 30px;
        }
    }
}
</style>